<template>
  <div class="home">
        <Header head-title="绑定/办理健康卡" go-back="true"></Header>
        <div class="addcard borderR" @click="BindCard()">
            <section class="Select">
                <section class="addImg">
                    <img src="../../assets/img/addcard.png" alt="">
                </section>
                <div class="addTitle">
                    <h3 class="fontCfff fontsM">绑定已有居民健康卡</h3>
                </div>
            </section>
            <p class="fontCfff fonts">绑定居民健康卡，挂号、就诊、健康档案一卡管理</p>
        </div>
        <div class="addcard apply borderR" @click="Login()">
            <section class="Select">
                <section class="addImg">
                    <img src="../../assets/img/applycard.png" alt="">
                </section>
                <div class="addTitle addTitle1">
                    <h3 class="fontCfff">在线办卡</h3>
                </div>
            </section>
            <p class="fontCfff fonts">卫健委指定、实名办卡，健康医疗、跨院就诊一卡通</p>
        </div>
        <p class="BindNo activecolor" @click="BindNo()">暂不绑定？跳过</p>
  </div>
</template>

<script>
import Header from '../../components/Header'
export default {
  data () {
    return {
      phone: '',
      code: ''
    }
  },
  components: {
    Header
  },
  methods: {
    BindCard () {
      this.$router.push({
        path: '/BindCard'
      })
    },
    Login () {
      this.$router.push({
        path: '/Login'
      })
    },
    BindNo () {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style scoped>
.home {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0.8rem;
    background: #fff;
    padding-top: 1.5rem;
    overflow-y: auto;
}
.BindNo {
  font-size: 0.35rem;
  padding: 0.6rem 0;
  text-align: right;
}
</style>
